
<!--
 * @Author: Rain 1254895072@qq,com
 * @Date: 2022-11-16 22:07:08
 * @LastEditors: Rain 1254895072@qq,com
 * @LastEditTime: 2022-11-17 18:52:03
 * @FilePath: \Ecommerce\src\views\echart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

  <div id="chartNum" :style="{ width: '150%', height: '300px' }">
    chartNum
  </div>
  <div :style="{ width: '100%', height: '20px' }"></div>
  <div id="myChart" :style="{ width: '150%', height: '300px' }"></div>

</template>

<script>
import { defineComponent } from "vue";
import * as echarts from "echarts";
import axios from "axios";
import { BackURL } from "@/api";
export default defineComponent({
  data() {
    return {
      chart1 : '',
      chart2 : '',
      chartPie: [
        {
          value: 10,
          name: "123",
        },
      ],
      chartNum: 10,
    };
  },
  methods: {
    getData() {
      axios.get(BackURL + "/echart").then((response) => {
        (this.chartPie = response.data.data.detail),
            (this.chartNum = response.data.data.count);
        console.log(this.chartPie);
        this.chart1.setOption({
          series: [
            {
              name: "Access",
              type: "gauge",
              progress: {
                show: true,
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}",
              },
              data: [
                {
                  value: this.chartNum,
                  name: "搜索总量",
                },
              ],
            },
          ],
        });
        this.chart2.setOption({
          series: [
            {
              name: "Compkey Rank 10",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "40",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: this.chartPie,
            },
          ],
        });
      });
      this.drawchart();
    },
    drawchart() {
      this.chart1 = echarts.init(document.getElementById("chartNum"));
      this.chart2 = echarts.init(document.getElementById("myChart"));
      //添加配置
      this.chart1.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "Access",
            type: "gauge",
            progress: {
              show: true,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
            },
            data: [
              {
                value: this.chartNum,
                name: "搜索总量",
              },
            ],
          },
        ],
      });

      this.chart2.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Compkey Rank 10",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.chartPie,
          },
        ],
      });
      // 自适应
      // window.onresize = function () {
      //   this.chart1.resize()
      //   this.chart2.resize()
      // }
    },
  },
  mounted() {
    // 调用这个函数  在节点创建完成之后
    this.getData();
    console.log(123);
  },
});
</script>
